<template>
  <div>
  <!-- 判断数据源那个数组容器，如果里面没有内容时候，则显示 -->
       <Loding v-if='nowplays.length==0'></Loding>
    <Filmitem :nowplays="nowplays" v-else> </Filmitem>
  </div>
</template>

<script>
import Filmitem from "../../components/Filmitem";
//调用api请求数据方法
import { filmListDate } from "../../api/api";
import Loding from '../../components/Loading'

//全都封装到api中
// import {filmListUri} from "../../config/uri"
// import {filmListDate} from '../../api/api'

export default {
  data() {
    return {
      page: 1,
      //正在热映的数据源
      nowplays: [],
    };
  },
  components: {
    Filmitem,
    Loding
  },
//在生命周期mounted中挂载
  async mounted() {
    let ret = await filmListDate(this.page);
    // console.log(ret)
    this.nowplays = ret.data.data.films;
  },

  //注：vue他本身只关注视图，如果太多逻辑写到视图层，会导致逻辑越来越多
  //因此需要将数据及逻辑单独存放

  //方法一
  // async mounted(){
  //   //axios已经是VUE实例中的方法，因此直接使用，另外filmListUri是URL地址
  //   //    $所起到什么作用？
  //    let ret= await this.$axios.get(filmListUri+this.page)
  //    console.log(ret)
  // }

  //将axios放到API文件中封装，原因是为了以后所有数据都集中在那个文件中
  //方便操作状态、缓存等等，这样，在此文件中只需调用方法即可

  //方法二（api箭头函数）
  // async mounted(){
  //  let ret= await filmListDate(this,filmListUri)
  //  console.log(ret)
  // }

  //方法三(普通函数)

  // async mounted(){
  //  let ret= await filmListDate.call(this,filmListDate)
  //  console.log(ret)
  // }
};
</script>
<style lang="scss" scoped>

</style>